<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page session="true" %>

<% 
	/*
	session = request.getSession(true);
	String strId = (String)session.getAttribute("id");
	if(strId != null){
		response.sendRedirect("main.jsp");
	}
	*/
%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
		<script type="text/javascript">
			
			displayLogin = function(){
				but_login.setAttribute('style', 'color:#944;');
				but_join.setAttribute('style', 'color:#499;cursor:hand;');
				
				but_sumit.setAttribute('value', 'Login');
				
				eleBoundRect.setAttribute('height', '210px');
				
				form_command.setAttribute('action', './fontPage.jsp?cmd=login');
				
				but_sumit.setAttribute('onclick', 'login();');
				
				$(".fld_join").hide();
			}
			
			displayJoin = function(){
				but_login.setAttribute('style', 'color:#499;cursor:hand;');
				but_join.setAttribute('style', 'color:#944;');
				
				but_sumit.setAttribute('value', 'Join');
				
				eleBoundRect.setAttribute('height', '435px');
				
				form_command.setAttribute('action', './fontPage.jsp?cmd=join');
				
				but_sumit.setAttribute('onclick', 'join();');
				
				$(".fld_join").show();
			}
			
			changeMod = function (_strMode){
				
				if(_strMode == 'join'){
					displayJoin();
				}else{
					displayLogin();
				}
			}
			
			onResizing = function(){
				
			}
			
			showInforMessageBox = function(_strMsg){
				box_error.style.display = "";
				box_error.style.backgroundColor = "rgba(77,200,200,0.5)";
				box_error.innerHTML = _strMsg;
			}

			showErrorMessageBox = function(_strMsg){
				box_error.style.display = "";
				box_error.style.backgroundColor = "rgba(200,88,88,0.5)";
				box_error.innerHTML = _strMsg;
			}
			
			clearMessage = function(){
				box_error.style.display = "none";
			}
			
			init = function(){
				//출력된 메시지를 제거한다.
				clearMessage();
				
				//로그인 모드로 전환
				displayLogin();
			}
			
			
			join = function(){
			    $.ajax({
			        type: 'post'
			        , async: true
			        , url: form_command.getAttribute("action")
			        , dataType: 'xml'
			        , data: "email="+fld_intput_email.value+"&pwd="+fld_intput_pwd.value+"&me2day="+fld_intput_me2day.value
			        , beforeSend: function() {
			        		showInforMessageBox("가입 승인을 요청 중입니다." );
			          }
			        , success: function(data) {
		        		var ret = $(data).find("result").text();
		        		
		        		if(ret == 'ok'){
		        			 showErrorMessageBox("성공적으로 가입했습니다." );
		        			 document.location = "./selectProject.jsp";
		        		}else{
		        			var msg = $(data).find("error").text();
		        			 showErrorMessageBox("가입에 실패했습니다.<br/>" + msg);
		        		}
			            
			          }
			        , error: function(data, status, err) {
			        	showErrorMessageBox("서버에 접속하지 못했습니다." );
			          }
			        , complete: function() { 
			        	
			          }
			    });
			}
			
			
			
			login = function(){
			    $.ajax({
			        type: 'post'
			        , async: true
			        , url: form_command.getAttribute("action")
			        , dataType: 'xml'
			        , data: "email="+fld_intput_email.value+"&pwd="+fld_intput_pwd.value
			        , beforeSend: function() {
			        		showInforMessageBox("로그인 승인을 요청 중입니다." );
			          }
			        , success: function(data) {
		        		var ret = $(data).find("result").text();
		        		
		        		if(ret == 'ok'){
		        			 showErrorMessageBox("로그인 성공" );
		        			 document.location = "./selectProject.jsp";
		        		}else{
		        			 showErrorMessageBox("로그인에 실패했습니다.<br/> Email과 비밀번호를 확인해 주십시오." );
		        		}
			            
			          }
			        , error: function(data, status, err) {
			        	showErrorMessageBox("서버에 접속하지 못했습니다." );
			          }
			        , complete: function() { 
			        	
			          }
			    });
			}
		</script>
	</head>
	<body onresize="onResizing()" onload="init()">
		<svg id="eleRootSvg" style="position:absolute;" xmlns="http://www.w3.org/2000/svg" >
			<rect id="eleBoundRect" rx="1px" ry="1px" x="100" y="100" 
				width="300px" height="210px" fill="#eeeeff" stroke="rgba(0,0,255,0.2)" />
		</svg>
		

		<div id="box_error" style="position:absolute;padding:10px;algn:center;left:235px;top:90px;width:155px;border:2pt solid #000;color:#555;font-size:10pt;font-weight:bold;background-color:#e88;" >
			중복된 email
		</div>

		<table style="position:absolute;left:130;top:120;">
			<tr>
				<td>
					<form id="form_command" action="./fontPage.jsp?cmd=login">
						<div style="font-face:'고딕';font-size:10pt;font-weight:bold;">
							<span style="color:#944;" id="but_login" onclick="changeMod('login');" >Login</span> | 
							<span style="color:#499;cursor:hand;" id="but_join" onclick="changeMod('join');">Join</span>
						</div>
						<br/>
						<div class="fld_join" style="display:none;">
							<table border="1px" width="240pt" style="table-layout:fixed;" cellpadding="7" cellspacing="0">
								<tr>
									<td>
										<span style="font-face:'고딕';font-size:9pt;">
											Mimo회원가입을 환영합니다.<br/>
											가입시 메일주소와 암호화된 비밀번호가 서버에 저장됩니다.<br/><br/>
											&#160; <span style="color:#f00;vertical-align: super;" class="fld_join">*</span> 표시된 항목은 필수입력 사항입니다.
										</span>
									</td>
								</tr>
							</table>
							<br/>
						</div>
						<div style="font-face:'고딕';font-size:10pt;font-weight:bold;">
							E-mail<span style="display:none;color:#f00;vertical-align: super;" class="fld_join">*</span> : 
						</div>
						<input type="text" id="fld_intput_email" style="width:180pt;font-size:10pt;" />
						<br/><br/>
						
						<div style="font-face:'고딕';font-size:10pt;font-weight:bold;">
							Password<span style="display:none;color:#f00;vertical-align: super;" class="fld_join">*</span> : 
						</div>
						<input type="password" id="fld_intput_pwd" style="width:180pt;font-size:10pt;" />
						
						<!-- 가입 -->
						<div class="fld_join" style="font-face:'고딕';font-size:10pt;font-weight:bold;display:none;">
							Password Confirm<span style="display:none;color:#f00;vertical-align: super;" class="fld_join">*</span> : 
						</div>
						<input class="fld_join" type="password" id="fld_intput_pwdcnf" style="width:180pt;font-size:10pt;display:none;" />
						<br class="fld_join" style="width:180pt;font-size:10pt;display:none;"/>
						<br class="fld_join" style="width:180pt;font-size:10pt;display:none;"/>
	
						<!-- 가입 -->
						<div class="fld_join" style="font-face:'고딕';font-size:10pt;font-weight:bold;display:none;">
							me2day ID : 
						</div>
						<input class="fld_join" type="text" id="fld_intput_me2day" style="width:180pt;font-size:10pt;display:none;" />
						
						<br/><br/>
						
						<input type="button" style="font-size:12pt;" value="Login" id="but_sumit" />
					</form>
			</td>
		</tr>
	</table>
	</body>
</html>